<template>
<!--<div>评价管理</div>-->
  <div>
    <Card shadow>
      <Button type="primary" @click="openModal()">添加客房类型</Button>&ensp;
      <Button type="error">批量删除</Button>&ensp;
      <Button type="info">批量导入</Button>&ensp;
      <Button type="success">导出为Csv文件</Button>
      <div class="search-con search-con-top">
        <Select v-model="searchKey" class="search-col">
          <Option v-for="item in columns" v-if="item.key !== 'handle' &&item.search!==false" :value="item.key"
                  :key="`search-col-${item.key}`">{{ item.title }}
          </Option>
        </Select>
        <Input clearable placeholder="输入关键字搜索" class="search-input"/>
        <Button class="search-btn" type="primary">
          <Icon type="search"/>&nbsp;&nbsp;搜索
        </Button>
      </div>
      <Table ref="dataTable" highlight-row :columns="columns"
             resizeable=true :data="data" :loading="loading"
             row-key="id" select
             border height="600"
      ></Table>
      <div style="text-align: right;margin-top: 10px">
        <Page :total="dataSize"
              :page-size="pageSize"
              :current="pageIndex"
              @on-change="changePage"
              @on-page-size-change="changeSize"
              show-total
              show-elevator
              show-sizer/>
      </div>
    </Card>
  </div>
</template>

<script>
import {getAllRoomTypeByPageAndSize} from "@/api/data";

export default {
  name: "list",
  data() {
    return {
      searchKey: '',
      loading: true,
      pageIndex: 1,
      pageSize: 10,
      dataSize: 0,
      data: [],
      columns: [{
        type: 'selection',
        width: 60,
        search:false,
        align: 'center'
      },
        {
          title: '类型名称',
          key: 'typeName',
          // minWidth: '150px',
          // width: 200,
        },
        {
          title: '日租费用',
          key: 'baseDailyRent',
          // minWidth: '150px',
          // width: 150,
        },
        {
          title: '时租费用',
          key: 'baseHourlyRate',
          // minWidth: '150px',
          // width: 150,
        },
        {
          title: '创建时间',
          key: 'createTime',
          // minWidth: '150px',
          // width: 200,
        },
        {
          title: '修改时间',
          key: 'updateTime',
          // minWidth: '150px',
          // width: 200,
        },
      ]
    }
  },
  methods: {
    changePage(page) {
      this.pageIndex = page;
      this.getData();
    },
    changeSize(size) {
      this.pageSize = size;
      this.getData();
    },
    getData() {
      this.loading = true
      getAllRoomTypeByPageAndSize(this.pageIndex, this.pageSize).then(data => {
        if (data.data.code !== 200 || !data.data.object.content) {
          this.$Message.error(data.data.message);
        } else {
          this.data = data.data.object.content;
          this.dataSize = data.data.object.totalElements;
        }
        this.loading = false
      });
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>

</style>
